@import "../../../styles/colors.less";

page {
  display: block;
  height: 100%;
  background-color: #f8f7fa;
  background-image: url("../../../assets/images/top-gr-bg.svg");
  background-repeat: no-repeat;
  box-sizing: border-box;
  background-size: 100%;

  .task-info {
    display: block;
    height: 100%;
    box-sizing: border-box;
    background-image: url("../../../assets/images/task-details-bg.svg");
    background-repeat: no-repeat;
    background-position-y: bottom;

    @bottom-btn-height: 100px;
    @content-top-margin: 60px;
    @bottom-btn-bottom-margin: 60px;
    @content-bottom-margin: 10px;
    @other-height:
      @bottom-btn-height
      + @content-top-margin
      + @bottom-btn-bottom-margin
      + @content-bottom-margin;
      .content {
      padding:  @content-top-margin 56px 0 56px;
      height: calc(~"100%" - @other-height);
      overflow-y: auto;
      margin-bottom: @content-bottom-margin;

      .title {
        margin-bottom: 80px;
        font-size: 60px;
      }

      .task-detail-content {
        font-size: 30px;
        color: #000;
        margin-bottom: 40px;
      }
    }

    .bottom-btn {
      height: @bottom-btn-height;
      line-height: @bottom-btn-height;
      font-size: 34px;
      margin: 0;
      border-radius: 40px;
      background-color: @purple100;
      color: #fff;
      margin: 0 56px @bottom-btn-bottom-margin 56px;

      &:after {
        border: none;
      }
    }

    button[disabled] {
      color: #c4c4c4;
      background: #e5e5e5;
      border: 1px solid #c4c4c4;
    }
  }
}
